<template>
  <div class="nav-bar">
    <div class="container w">
      <h2 class="left">{{ title }}</h2>
      <div class="right">
        <ul>
          <li>概述页</li>
          <li>参数页</li>
          <li>F码通道</li>
          <li>咨询客服</li>
          <li>用户评价</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="container w">
      <div class="main-left-img">
        <img
          :src="
            /^\d/.test(img)
              ? require('/src/assets/images/main/body/phone/phoneType/' + img)
              : img
          "
          alt=""
        />
      </div>
      <div class="main-right-option">
        <h1>{{ title }}</h1>
        <p>
          <font v-pre color="ff4a00"
            >[至高享6期免息，信用卡分期支付享优惠]</font
          >
          {{ describe }} | 原生美肌人像2.0 | 4D光追焕颜美妆技术 |
          3200万高清质感自拍 | 升级人眼追焦 | 6400万AI三摄 | 3D曲面OLED柔性屏 |
          120Hz+Dolby Vision | 55W有线闪充 | 立体声双扬声器 | 多功能NFC
        </p>
        <p>小鑫自营</p>
        <p class="price">{{ price.substring(0, price.length - 1) }}</p>
        <div class="line"></div>
        <div class="info">
          <h3>选择版本</h3>
          <ul class="info-option">
            <li v-for="(item, index) in phoneMemory" :key="index">
              <a href="javascript:;" @click="selectMemory">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="info">
          <h3>选择颜色</h3>
          <ul class="info-option">
            <li v-for="(item, index) in phoneColor" :key="index">
              <a href="javascript:;" @click="selectColor">{{ item }}</a>
            </li>
          </ul>
        </div>
        <div class="add-shopping-cart">
          <a href="javascript:;" @click="addShoppingCart">加入购物车</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { reactive, getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {
  name: "BuyVue",
  setup() {
    const route = useRoute();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    //选择的手机信息
    const phoneInfo = {
      other: {
        memory: "",
        color: "",
      },
      ...route.params,
    }
    //手机内存信息
    const phoneMemory = reactive(["8GB+128GB", "8GB+256GB", "12GB+128GB"]);
    //手机颜色信息
    const phoneColor = reactive(["墨羽", "幽芒", "银迹", "幻镜"]);
    //保存上一个选项dom实例
    let previousDomMemory;
    let previousDomColor;

    //dom实例选中改变样式和手机信息的选择
    //--手机内存模块--
    function selectMemory(e) {
      previousDomMemory && (previousDomMemory.className = "");
      e.target.className = "select-state";
      previousDomMemory = e.target;
      phoneInfo.other.memory = e.target.innerText;
    }
    //--手机颜色模块--
    function selectColor(e) {
      previousDomColor && (previousDomColor.className = "");
      e.target.className = "select-state";
      previousDomColor = e.target;
      phoneInfo.other.color = e.target.innerText;
    }

    //添加到购物车
    function addShoppingCart() {
      if (phoneInfo.other.color && phoneInfo.other.memory) {
        const item = JSON.stringify(phoneInfo)
        store.commit("shoppingcart/addPhoneList", JSON.parse(item));
        store.commit(
          "user/updateShoppingCartNum",
          store.state.shoppingcart.phoneList.length
        );
        proxy.$message.success("添加成功");
      } else {
        proxy.$message.warning("请选择产品规格");
      }
    }
    return {
      ...route.params,
      selectMemory,
      selectColor,
      phoneMemory,
      phoneColor,
      addShoppingCart,
    };
  },
};
</script>

<style lang="less" scoped>
.nav-bar {
  position: sticky;
  top: 0;
  margin-bottom: 10px;
  padding: 20px 0;
  height: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.6);
  .container {
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 18px;
      font-weight: 400;
      color: #424242;
    }
    .right {
      ul {
        display: flex;
        li {
          padding: 0 10px;
          font-size: 14px;
          color: #616161;
          cursor: pointer;
          &:hover {
            color: cornflowerblue;
          }
          &:not(li:last-child) {
            border-right: 1.5px solid rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
}
.main {
  .container {
    display: flex;
    justify-content: space-between;
    .main-left-img {
      img {
        width: 560px;
        height: 560px;
      }
    }
    .main-right-option {
      width: 600px;
      h1 {
        margin: 20px 0;
        font-size: 24px;
        color: #212121;
      }
      p {
        margin-bottom: 15px;
        &:nth-of-type(1) {
          font-size: 14px;
          line-height: 24px;
          text-indent: 14px;
          color: #b0b0b0;
        }
        &:nth-of-type(2) {
          font-size: 14px;
          color: #ff6700;
        }
        &:nth-of-type(3) {
          font-size: 18px;
          color: #ff6700;
        }
      }
      .line {
        height: 1px;
        background-color: #ddd;
      }
      .info {
        h3 {
          margin: 10px 0;
          font-size: 18px;
          color: #333;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            margin-bottom: 10px;
            a {
              display: block;
              width: 292px;
              height: 42px;
              line-height: 42px;
              text-align: center;
              color: #666;
              border: 1px solid #bbb;
            }
            .select-state {
              border: 1px solid cornflowerblue;
              color: cornflowerblue;
            }
          }
        }
      }
      .add-shopping-cart {
        margin-top: 10px;
        a {
          display: block;
          width: 300px;
          height: 54px;
          color: #fff;
          background-color: cornflowerblue;
          text-align: center;
          line-height: 54px;
          opacity: 0.9;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>